<template>
    <div class="sub">
        <div class="subBox">
            <brand>
                <brandItem :to="'/'">首页</brandItem>
                <brandItem :to="('/cate?id=' + obj.three)">{{ obj.two }}</brandItem>
                <brandItem>{{ obj.one }}</brandItem>
            </brand>
            <div class="sub-filter">
                <div class="item">
                    <div class="head">品牌：</div>
                    <div class="body">
                        <a href="javascript:;" v-for="item in all" :key="item.id" @click="setBrand(item.id)"
                            :class="{ active: item.id == brandid }">{{ item.name }}</a>
                    </div>
                </div>
            </div>
            <div class="sub-filter">
                <div class="item" v-for="(item, key) in auto" :key="item.id">
                    <div class="head">{{ item.name }}</div>
                    <div class="body">
                        <a href="javascript:;" v-for="it in item.properties" :key="it.id"
                            @click="setchangeattr(key, item.name, it.name, it.id)" ref="a"
                            :class="{ active: changeattr[key] && it.id == changeattr[key].id }">{{ it.name }}</a>
                    </div>
                </div>
            </div>



            <div class="sortview">
                <div class="left">
                    <div class="sortarea">
                        <section v-for="(item, key) in radioarea" :key="key">
                            <input type="radio" name="sortarea" :value="item.val" v-model="sortField" :id="key"
                                @click="sortMethod = null">
                            <label :for="key">{{ item.name }}</label>
                        </section>
                    </div>
                    <div class="pricearea">
                        <span class="pricesort" @click="setPriceSort()">
                            价格排序
                            <i class="arrow up" :class="{ active: sortMethod == 'asc' }" />
                            <i class="arrow down " :class="{ active: sortMethod == 'desc' }" />
                        </span>
                    </div>
                </div>
                <div class="right">
                    <check-box :val.sync="inventory" :title="'have'">仅显示有货商品</check-box>
                    <check-box :val.sync="onlyDiscount" :title="'cheap'">仅显示特惠商品</check-box>
                </div>
            </div>
            <!-- 结果展示区 -->
            <div class="goodsdata">
                <goods-item v-for="item in goodslist" :key="item.id" :info="item"></goods-item>
            </div>
            <!-- 监控加载盒子 -->
           
            <!-- <infinite-loading :finished="finished" :loading="loading" @getData="getData"></infinite-loading> -->
            <XtxInfiniteLoading :finished="finished" :loading="loading" @getData="getData" />
        </div>
    </div>
</template>

<script>
import brandItem from '@/components/utils/brand/BrandItem.vue'
import brand from '@/components/utils/brand/BrandView.vue'
import { getFilter } from '@/Api/cate'
import CheckBox from "@/components/utils/CheckBox"
import { getGoods } from '@/Api/cate'
import GoodsItem from "@/components/utils/GoodsItem"
import XtxInfiniteLoading from "./XtxInfiniteLoading.vue"
// import InfiniteLoading from "@/components/utils/InfiniteLoading"
export default {
    components: { brand, brandItem, CheckBox, GoodsItem,XtxInfiniteLoading },
    data() {
        return {
            rid: null,
            obj: {
                one: null,
                two: null,
                three: null
            },
            list: [],
            auto: [],
            all: [],
            flag: null,
            cid: null,

            //选择品牌
            brandattr: [],
            //属性
            attr: [],
            //排序按钮组的数据
            radioarea: [
                { val: '', name: "默认排序" },
                { val: 'publishTime', name: "最新商品" },
                { val: 'orderNum', name: "最该人气" },
                { val: 'evaluateNum', name: "评论最多" }
            ],
            sortField: "",//点的哪个排序
            sortMethod: "",//排序方式
            inventory: false,//是否有库存
            onlyDiscount: false,//是否显示特惠
            loading: false,//正在加载中
            finished: false,//是否已经加载完成
            query: {
                categoryId: null,
                page: 1,
                pageSize: 20
            },
            goodslist: [],
            brandid: null,//当前选中的品牌id
            changeattr: []
        }
    },
    methods: {
        setList() {
            this.list = this.$store.state.list
            let index = null
            for (let i = 0; i < this.list.length; i++) {
                index = this.list[i].children.findIndex(item => item.id == this.rid)
                if (index != -1) {
                    this.obj.one = this.list[i].children[index].name
                    this.obj.two = this.list[i].name
                    this.obj.three = this.list[i].id
                    break;
                }
            }
        },
        async getFilters() {
            let { data: res } = await getFilter(this.rid)
            this.all = res.result.brands
            this.auto = res.result.saleProperties
            // console.log(res);
            let obj = {
                id: '',
                name: '全部'
            }

            this.all.unshift(obj)

            this.auto.forEach(item => {
                item.properties.unshift(obj)
            })

        },
        //设置品牌
        setBrand(id) {
            //保存点击的ID
            this.brandid = id
            //请求数据
            this.query.brandId = id
            this.resetgetdata()
        },
        //设置选择的属性
        setchangeattr(key, onename, twoname, twoid) {
            var obj = { groupName: onename, propertyName: twoname, id: twoid }
            //不要这么写 视图不更新
            // this.changeattr[key]=obj
            // console.log(this.changeattr)
            //这才是正确的语法
            this.$set(this.changeattr, key, obj)
        },
        //重置请求参数
        resetgetdata() {
            this.query.page = 1;
            this.goodslist = []
            this.getData()
        },
        //价格排序区域
        setPriceSort() {
            this.sortField = "price"
            if (!this.sortMethod) {
                this.sortMethod = "desc"
            } else {
                this.sortMethod = (this.sortMethod == 'desc' ? 'asc' : 'desc')
            }
        },
        //获取数据
        async getData() {
            this.loading = true
            //调用接口
            let {data:res} = await getGoods(this.query)
            if (res.result && res.result.items.length != 0) {
                this.goodslist = [...this.goodslist, ...res.result.items]
                //加页码
                this.query.page += 1
            } else {
                //没得到数据  以及完成
                this.finished = true
            }
            this.loading = false
        },
    },
    mounted() {
        this.query.categoryId = this.$route.query.id
        this.getData()
    },
    watch: {
        '$route': {
            handler(val) {
                this.rid = val.query.id
                this.setList()
                this.getFilters()
            },
            deep: true,
            immediate: true
        },
        //监听属性选择
        changeattr(val) {
            //过滤出id为null的数据不发请求
            var attr = val.filter(item => {
                return item.id != null
            })
            //连接this.query发请求
            this.query = { ...this.query, ...{ attr } }
            this.goodslist = []
            if (attr.length != 0) {
                this.getData()
            }
        },
        //检测排序方式的变化
        sortField(val) {
            //设置条件
            if (val == "price") {
                this.query.sortField = val
                this.query.sortMethod = this.sortMethod
            } else {
                this.query.sortField = val
                this.query.sortMethod = null
            }
            //设置成第一页
            //请求数据
            this.resetgetdata()
        },
        //价格监听  val  oldval
        sortMethod(val, oldval) {
            //从desc  或者 asc 变成空的时候不发请求
            if (val == null) {
                return false
            }
            //从空 到desc的时候在前面已经发过请求  可以不发请求
            if (oldval != null) {
                this.query.sortMethod = val
                this.resetgetdata()
            }
        },
        //有没有货
        onlyDiscount(val) {
           
            this.query.onlyDiscount = val
            this.resetgetdata()
        },
        inventory(){
            this.resetgetdata()
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.active {
    color: $xtxColor !important;
}

.sub {
    width: 100%;
    background: #f5f5f5;

    .subBox {
        width: 1240px;
        margin: auto;
    }

}

.sub-filter {
    background: #fff;
    padding: 25px;

    .item {
        display: flex;
        line-height: 40px;

        .head {
            width: 80px;
            color: #999;
        }

        .body {
            flex: 1;

            a {
                margin-right: 36px;
                transition: all .3s;
                display: inline-block;
                color: black;
                text-decoration: none;

                &:hover {
                    color: $xtxColor;
                }
            }
        }
    }
}


.sortview {
    background: #fff;
    margin-top: 20px;
    height: 60px;
    align-items: center;
    display: flex;
    justify-content: space-between;

    .sortarea {
        display: flex;

        &>section {
            margin-left: 20px;

            input {
                display: none;
            }

            label {
                display: inline-block;
                width: 98px;
                height: 30px;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 30px;
                color: #999;
            }

            input:checked+label {
                background: $xtxColor;
                color: #fff;
                border: none;
            }
        }
    }

    .left {
        display: flex;

        .pricearea {
            &>span {
                position: absolute;
                width: 98px;
                height: 30px;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 30px;
                color: #999;
                margin-left: 20px;

                .arrow {
                    position: absolute;
                    border: 5px solid transparent;
                    right: 8px;

                    &.up {
                        top: 3px;
                        border-bottom-color: #bbb;
                        color: red;

                        &.active {
                            border-bottom-color: $xtxColor;
                        }
                    }

                    &.down {
                        top: 15px;
                        border-top-color: #bbb;

                        &.active {
                            border-top-color: $xtxColor;
                        }
                    }
                }
            }
        }
    }
}

.right {
    display: flex;
}

.goodsdata {
    background: #fff;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}
</style>